import {PieChart, Pie, ResponsiveContainer, Cell} from 'recharts';
import {STAT_COLORS} from "../../../constant";

const data01 = [
    {name: 'Group A', value: 400},
    {name: 'Group B', value: 300},
    {name: 'Group C', value: 300},
    {name: 'Group D', value: 200},
    {name: 'Group E', value: 278},
    {name: 'Group F', value: 189},
];

export const PieDemo = () => {
    return (
        <div style={{width: '300px', height: '400px'}}>
            <ResponsiveContainer width={'100%'} height={'100%'}>
                <PieChart>
                    <Pie dataKey={'value'} data={data01} cx={'50%'} cy={'50%'} outerRadius={50}
                         label={i => `${i.name}: ${i.value}`}>
                        {data01.map((i, index) => (
                            <Cell key={index} fill={STAT_COLORS[index]}></Cell>
                        ))}
                    </Pie>
                </PieChart>
            </ResponsiveContainer>
        </div>
    );
};